<template>
  <div class="box">
    <div class="cmder">
      <!-- screen out -->
      <div class="screen">
        <div
          class="screen_one"
          v-if="listdata"
        >单程： {{listdata.info.departCity}} - {{listdata.info.destCity}} / {{listdata.info.departDate}}</div>
        <div class="screen_two">
          <el-form size="mini" class="el_form">
            <el-form-item style="width: 99px;" v-for="(item,index) in filterData" :key="index">
              <el-select :placeholder="item.placeholder" v-model="filterTheData[index]">
                <el-option
                  v-for="(item1,index1) in item.list"
                  :key="index1"
                  :label="item1.label"
                  :value="item1.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- screen out -->

      <!-- 撤销按钮 -->
      <div class="revocation">
        <span>撤销：</span>
        <el-row>
          <el-button type="primary" size="mini" round @click="filterTheData=['','','','']">撤销</el-button>
        </el-row>
      </div>
      <!-- 撤销按钮 -->

      <div class="one">
        <div class="property">
          <span>航空信息</span>
          <span>起飞时间</span>
          <span>到达时间</span>
          <span>价格</span>
        </div>
      </div>

      <TicketReservation v-for="item in pageList" :key="item.id" :flights="item" />

      <!-- 分页 -->
      <div class="block" v-if="dataLength">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,20,30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataLength"
        ></el-pagination>
      </div>
      <!-- 分页 -->
    </div>
    <!-- 历史记录 -->
    <div class="data">
      <div class="data_authentication">
        <div class="data_authentication_icon">
          <i class="iconfont iconweibiaoti-_huabanfuben">
            <span>航协认证</span>
          </i>
          <i class="iconfont iconbaozheng">
            <span>出行认证</span>
          </i>
          <i class="iconfont icondianhua">
            <span>7×24</span>
          </i>
        </div>
        <div class="phone">免费电话：400634567转2</div>
      </div>
      <div class="data_history">
        <div class="data_history_one">查询历史</div>
        <div class="histoyS" v-for="(item,index) in $store.state.air.history" :key="index">
          <div class="histoyS_city">
            <div class="histoyS_city">{{item.departCity}} - {{item.destCity}}</div>
            <div class="histoyS_time">{{item.departDate}}</div>
          </div>
          <div class="histoyS_select">
            <div class="btn">选择</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 历史记录结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      listdata: "",
      pageSize: 10, //页面条数
      currentPage: 1, //当前所在页
      pageList: [], //分页后的数据

      filterData: "", //筛选的数据

      filterTheData: ["", "", "", ""], //筛选绑定的数据

      dataLength: "", //数据长度
    };
  },

  watch: {
    filterTheData() {
      this.pagingQuery();
    },
  },

  async mounted() {
    const res = await this.$axios.get("/airs", { params: this.$route.query });
    console.log(res.data);
    this.listdata = res.data;

    //筛选功能创建数组，遍历生成筛选结构
    let list = [];
    list.push({
      placeholder: "起飞机场",
      list: this.listdata.options.airport.map((v) => ({ label: v, value: v })),
    });
    list.push({
      placeholder: "起飞时间",
      list: this.listdata.options.flightTimes.map((v) => ({
        label: `${v.from}:00-${v.to}:00`,
        value: `${v.from}-${v.to}`,
      })),
    });
    list.push({
      placeholder: "起飞公司",
      list: this.listdata.options.company.map((v) => ({ label: v, value: v })),
    });
    list.push({
      placeholder: "机型",
      list: [
        { label: "大", value: "L" },
        { label: "中", value: "M" },
        { label: "小", value: "S" },
      ],
    });
    this.filterData = list;

    this.pagingQuery(); //调用分页处理
  },
  methods: {
    pagingQuery() {
      //计算起飞时间  分钟数
      let startiming = this.filterTheData[1].split("-")[0] * 60;
      let endtiming = this.filterTheData[1].split("-")[1] * 60;
      console.log(startiming + "----" + endtiming);

      // 筛选
      let data = this.listdata.flights.filter((v, i) => {
        if (
          (this.filterTheData[0] == "" ||
            this.filterTheData[0] == v.org_airport_name) &&
          (v.airline_name == this.filterTheData[2] ||
            this.filterTheData[2] == "") &&
          (this.filterTheData[3] == v.plane_size ||
            this.filterTheData[3] == "") &&
          ((startiming <= v.dep_time.split(":")[0] * 60 &&
            endtiming >= v.dep_time.split(":")[0] * 60) ||
            this.filterTheData[1] == "")
        ) {
          return true;
        } else {
          return false;
        }
      });
      this.dataLength = data.length;
      console.log(data);
      //分页处理函数
      // 开始条数= 当前页-1 * 页面条数
      // 结束条数= 当前页 * 页面条数
      let start = (this.currentPage - 1) * this.pageSize; //开始
      let end = this.currentPage * this.pageSize; //结束
      this.pageList = data.filter((v, i) => {
        if (i >= start && i < end) {
          return true;
        } else {
          return false;
        }
      });
      console.log(this.pageList);
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.pagingQuery();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.pagingQuery();
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  justify-content: space-between;
  .cmder {
    width: 700px;
    margin-top: 10px;
  }
  .one {
    width: 100%;
    .property {
      width: 100%;
      line-height: 28px;
      margin: 10px 0 6px;
      background: #f6f6f6;
      display: flex;
      justify-content: space-around;
      font-size: 12px;
      border: solid #dddddd 1px;
    }
  }
  .screen {
    display: flex;
    align-items: center;
    .screen_one {
      flex: 4;
      font-size: 14px;
    }
  }
  .screen_two {
    flex: 8;
    display: flex;
    align-items: certer;
    width: 100%;
    .el_form {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
      margin: 0;
      margin-left: 6px;
    }
    .el-form-item {
      margin: 0;
    }
  }

  .revocation {
    display: flex;
  }
  .data {
    width: 280px;
    .data_authentication {
      border: solid 1px #d4d1d1;
      .data_authentication_icon {
        display: flex;
        justify-content: space-evenly;
        padding: 20px 6px;
        i {
          color: #439fff;
          font-size: 40px;
          display: flex;
          flex-direction: column;
          span {
            font-size: 12px;
            color: #000000;
            padding-top: 8px;
          }
        }

        .iconfont.iconbaozheng {
          color: #088408;
        }
      }

      .phone {
        width: 100%;
        padding: 10px 0 10px 30px;
        background: #f6f6f6;
      }
    }

    .data_history {
        padding: 10px;
        margin-top: 20px;
        border: solid 1px #d4d1d1;
      .data_history_one {
          font-size: 16px;
          border-bottom: solid 1px #f1f1f1;
          padding-bottom: 10px;
      }
      .histoyS {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 14px;
        .histoyS_city {
          .histoyS_city {
              font-size: 14px;
          }
          .histoyS_time {
              font-size: 12px;
              color: #bfbfc5;
          }
        }
        .histoyS_select {
          .btn {
              background: #ffa500;
              line-height: 26px;
              text-align: center;
              border-radius: 4px;
              padding: 0 4px;
              color: #ffffff;
          }
        }
      }
    }
  }
}
</style>